<template>
	<view class="notice_state_box">
		<view class="choose_fill"></view>
		<view class="choose">
			<uni-segmented-control 
				:current="current" 
				:values="items" 
				style-type="button"
				:active-color="primary_light_color" 
				@clickItem="onChooseFun" />
		</view>
		<view v-if="viewStateData?.length" class="state_list">
			<view class="card" v-for="item in viewStateData" :key="item">
				<view class="left">
					<Avatar :fileName="item.user_avatar" size="70rpx" />
				</view>
				<view class="right">
					<view class="name text_ellipsis">
						{{item.nick_name_by_dormitory}}
					</view>
					<view class="time">
						{{item?.createAt ? deleteLot(item.createAt)+' 读' : '未读'}}
					</view>
				</view>
			</view>
		</view>
		<view v-else class="state_list">
			<MyNull img="nullList.png"/>
		</view>
	</view>
</template>

<script setup>
	import {ref} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	
	import {
		dynamicStyleStore
	} from '@/stores/dynamicStyle.js'
	
	import {
		DormitoryModel
	} from '@/service/model/dormitory.js'
	
	import {
		verifyIsLogin
	} from '@/hooks/verify.js'
	
	import {
		deleteLot
	} from '@/utils/changeData.js'
	
	import MyNull from '@/components/MyNull/MyNull.vue'
	
	const dynamicStyle_store = dynamicStyleStore()
	const dormitoryModel = new DormitoryModel()
	
	const {
		primary_light_color,
		primary_hot_color,
		primary_cool_color,
		primary_text_color,
		primary_border_color,
		shallow_text_color
	} = dynamicStyle_store.dormitoryStyle
	
	const notice_id=ref()
	const items = ref(['未读','已读'])
	const current = ref(0)
	
	const viewStateData=ref([])
	const allViewStateData=ref({})
	
	const dormitoryAllId = uni.getStorageSync('homeData')
	
	//选择展示条件
	const onChooseFun=(e)=>{
		if(e.currentIndex===0){
			viewStateData.value = allViewStateData.value.notViewedUsers
		}else{
			viewStateData.value = allViewStateData.value.viewedUsers
		}
	}
	
	const init=async()=>{
		const {data,success} = await dormitoryModel.getNoticeState({
			notice_id:notice_id.value,
			dormitory_id:dormitoryAllId.dormitory_id
		},dormitoryAllId.relation_id)
		if(success){
			allViewStateData.value = data[0]
			viewStateData.value = allViewStateData.value.notViewedUsers
		}
	}
	
	onLoad((opt)=>{
		notice_id.value = opt.notice_id
		init()
	})
</script>

<style lang="less">
	.text_ellipsis {
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}
	.notice_state_box{
		height: calc(100vh);
		padding: 20rpx;
		.choose_fill{
			width: 94%;
			position: fixed;
			z-index: 4;
			height: 6%;
			background-color: #FFFFFF;
		}
		.choose{
			width: 94%;
			position: fixed;
			z-index: 4;
		}
		.state_list{
			margin-top: 14%;
			overflow: hidden;
			.card{
				display: flex;
				padding-bottom: 20rpx;
				margin-bottom: 20rpx;
				.left{
					width: 100rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					margin-right: 20rpx;
				}
				.right{
					flex: 1;
					width: 100%;
					border-bottom: 1px solid v-bind(primary_border_color);
					.name{
						width: 90%;
						color: v-bind(primary_text_color);
					}
					.time{
						color: v-bind(shallow_text_color);
						font-size: 22rpx;
					}
				}
			}
		}
	}
</style>
